<template>
    <div class="sdy-home-banner"> 
        <van-swipe 
        class="swiper-container" 
        :autoplay="3000" 
        :duration="1000"
        indicator-color="pink">
            <van-swipe-item
            v-for="item in bannerList"
            :key="item.bannerid">
                <van-image :src="item.img"></van-image>
            </van-swipe-item>    
        </van-swipe>
    </div>
</template>
<script setup lang="ts">
//倒入对应的 api 请求功能函数
import { bannerListApi } from '@/api/banner';
//导入类型限制
import type { MyBannerItem } from '@/config/interface'
import { ref , onMounted } from 'vue';

// 提前准备一个数组，请求回来以后进行替换
// 用该数组渲染页面（因为涉及到替换，所以用ref来定义）
const bannerList = ref<MyBannerItem[]>([])
// 挂载完毕的钩子
onMounted(async () => {
    // 获取轮播图列表
    const res = await bannerListApi()
    // console.log(res);
    bannerList.value = res.data
})






</script>

<style scoped lang="scss">
@import '@/styles/variable.scss';
.sdy-home-banner {
    height: 180px;
    // border-bottom: 1px solid #333;
    position: relative;
    box-sizing: border-box;
    padding: 15px;

&::after {
    content: '';
    position: absolute;
    left: 0;
    top: -50px;
    width: 100%;
    height: 100%;
    background-color: $globalColor;
    border-radius: 0 0 200px 200px / 0 0 40px 430px;
    z-index: -1;
}

.swiper-container{
    width: 100%;
    height: 100%;
    background-color: blueviolet;
    border-radius: 10px;
    overflow: hidden;
}
}
</style>